<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        li {
            line-height: 30px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 id="title">模拟封装jqeury</h2>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>

    // 获取元素 根据传入的css选择器得到一个伪数组,可以使用GetEle.prototype的属性和方法
    function GetEle(selector) {
        var list = document.querySelectorAll(selector);

        list = Array.from(list);  // 转为真数组 
        Object.setPrototypeOf(list, GetEle.prototype);  // 再改为伪数组

        return list; // [ele,ele,ele,ele]
    }

    // prototype 原型对象方法  => 所有的实例化对象均可使用
    // GetEle.prototype.setText = function (con) {
    //     // this => 指向调用此方法的实例化对象  // 伪数组  [li,li,li,li]
    //     for (var i = 0; i < this.length; i++) {
    //         var ele = this[i];
    //         ele.textContent = con;
    //     }
    // }

    // GetEle.prototype.getText = function () {
    //     // this => 指向调用此方法的实例化对象  // 伪数组  [li,li,li,li]
    //     return this[0].textContent;
    // }

    // text()  可以获取和设置集合中元素的文本内容
    // text(111)  有参数就设置
    // text()     没有参数就获取
    GetEle.prototype.text = function (con) {
        // this => 指向调用此方法的实例化对象 
        if (arguments.length >= 1) {
            // for (var i = 0; i < this.length; i++) {
            //     var ele = this[i];
            //     ele.textContent = con;
            // }

            this.each(function (ele, index) {
                ele.textContent = con;
            })
        } else {
            return this[0].textContent;
        }
    }

    GetEle.prototype.html = function (con) {
        // this => 指向调用此方法的实例化对象
        if (arguments.length >= 1) {
            // for (var i = 0; i < this.length; i++) {
            //     var ele = this[i];
            //     ele.innerHTML = con;
            // }
            this.each(function (ele, index) {
                ele.innerHTML = con;
            })
        } else {
            return this[0].innerHTML;
        }
    }

    GetEle.prototype.val = function (con) {
        // this => 指向调用此方法的实例化对象
        if (arguments.length >= 1) {
            // for (var i = 0; i < this.length; i++) {
            //     var ele = this[i];
            //     ele.value = con;
            // }

            this.each(function (ele, index) {
                ele.value = con;
            })
        } else {
            return this[0].value;
        }
    }

    GetEle.prototype.hide = function () {
        //  this => 指向调用此方法的实例化对象
        // for (var i = 0; i < this.length; i++) {
        //     var ele = this[i];
        //     ele.style.display = "none";
        // }

        this.each(function (ele, index) {
            ele.style.display = "none";
        })
    }

    GetEle.prototype.show = function () {
        //  this => 指向调用此方法的实例化对象
        // for (var i = 0; i < this.length; i++) {
        //     var ele = this[i];
        //     ele.style.display = "block";
        // }

        this.each(function (ele, index) {
            ele.style.display = "block";
        })
    }

    GetEle.prototype.on = function (type, handerFn) {
        //  this => 指向调用此方法的实例化对象
        // for (var i = 0; i < this.length; i++) {
        //     var ele = this[i];
        //     ele.addEventListener(type, handerFn);
        // }

        this.each(function (ele, index) {
            ele.addEventListener(type, handerFn);
        })
    }

    GetEle.prototype.off = function (type, handerFn) {
        //  this => 指向调用此方法的实例化对象
        // for (var i = 0; i < this.length; i++) {
        //     var ele = this[i];
        //     ele.removeEventListener(type, handerFn);
        // }

        this.each(function (ele, index) {
            ele.removeEventListener(type, handerFn);
        })
    }

    GetEle.prototype.click = function (handerFn) {
        //  this => 指向调用此方法的实例化对象
        this.on("click", handerFn);
    }

    GetEle.prototype.each = function (handerFn) {
        // this -> 调用此方法的实例化对象
        for (var i = 0; i < this.length; i++) {
            var item = this[i];
            var index = i;
            handerFn(item, index);
        }
    }



    var $li = new GetEle(".list li");
    console.log($li);  // [li,li,li,li,li,li]

    $li.each(function (ele, i) {
        console.log(ele, i);
    })

    $li.html(123123);
    $li.click(function () {
        console.log(this);
    });




    var $title = new GetEle("#title");
    console.log($title);  // [h2#title]
    // $title.text(22222);
    // console.log($title.text());

    $title.html(456456)
    // $title.hide()

    $title.click(function () {
        console.log(11111);
    });






    /*  function setText(con) {
         for (var i = 0; i < list.length; i++) {
             var ele = list[i];
             ele.textContent = con;
         }
     }
 
     function getText(con) {
         // var arr = [];
         // for (var i = 0; i < list.length; i++) {
         //     var ele = list[i];
         //     arr.push(ele.textContent);
         // }
         // return arr; 
 
         return list[0].textContent;
     }
 
     function addClass(classStr) { // 一个或多个(多个用空格分隔 "one two three")
         var arr = classStr.split(" "); // 
         for (var i = 0; i < list.length; i++) {
             var ele = list[i];
             ele.classList.add(...arr);
         }
     }
 
     function removeClass(classStr) { // 一个或多个(多个用空格分隔 "one two three")
         var arr = classStr.split(" "); // 
         for (var i = 0; i < list.length; i++) {
             var ele = list[i];
             ele.classList.remove(...arr);
         }
     } */










</script>

</html>